<template>
  <tr class="form-line">
    <td v-for="field in fields"
        :key="field.code">
      <component :ref="'field_'+field.code"
                 :model="field"
                 :require="field.require"
                 :is="fieldControl(field)"
                 :rowData="data"
                 :value="data[field.code]"
                 @input="fieldInput(field.code,$event)"
                 :status="rowStatus[field.code] || {}"></component>
    </td>
    <td class="cell-delete">
      <Button class="text-danger row-delete"
              icon="close"
              size="small"
              type="text"
              @click="rowDelete"></Button>
    </td>
  </tr>
</template>
<script>
import Fields from 'field';
import $ from '@/common';
$;
export default {
	props: {
		fields: {
			default: () => [],
		},
		data: {
			default: () => {},
		},
	},
	watch: {
		data: {
			handler() {
				//this.setData($.copyJson(this.data))
			},
		},
	},
	data() {
		return {
			rowStatus: {},
		};
	},
	methods: {
		fieldControl(field) {
			return Fields.inlineFieldType(field);
		},
		fieldInput(code, value) {
			this.$emit('input', { code, value });
		},
		rowDelete() {
			this.$emit('delete');
		},
	},
	components: {
		...Fields.control,
	},
};
</script>
<style lang="less">
tr > td {
	> .ivu-btn.row-delete {
		margin: 0;
	}
}
</style>
